<script setup lang='ts'>
import { computed, ref,onMounted } from 'vue'
import { NModal, NTabPane, NTabs,useMessage } from 'naive-ui'
import {  } from '@/store'
import { SvgIcon } from '@/components/common'
import type { NoticeInfo } from '@/store/modules/Popup/helper'
import {useNoticeStore} from "@/store/modules/Popup";
import { t } from '@/locales'
import {requestNoticeContent} from '@/api/Popup'

interface Props {
  visible: boolean
}

interface Emit {
  (e: 'update:visible', visible: boolean): void
}
const ms = useMessage()

const noticeStore = useNoticeStore()

const props = defineProps<Props>()

const emit = defineEmits<Emit>()

loadPopup()
const noticeInfo = computed(() => noticeStore.noticeInfo)

async function loadPopup() {
    let res = await requestNoticeContent("index")
    noticeInfo.value.title = res.title
    noticeInfo.value.content = res.content
    noticeInfo.value.id = res.id
    updateNoticeInfo(noticeInfo.value)
}
function updateNoticeInfo(options: Partial<NoticeInfo>) {
    noticeStore.updateNoticeInfo(options)
}

const noticeTitle = ref(noticeInfo.value.title )

const noticeContent = ref(noticeInfo.value.content)

const show = computed({
  get() {
    return props.visible
  },
  set(visible: boolean) {
    emit('update:visible', visible)
  },
})
</script>

<template>
  <NModal v-model:show="show" :auto-focus="true" preset="card" style="width: 95%; max-width: 640px">
    <div>
      <NTabs  type="line">
        <NTabPane  name="Config" tab="Config">
          <template #tab>
            <div class="text-lg" icon="ri:list-settings-line" />
            <span class="ml-2">{{ $t('setting.notice') }}</span>
          </template>
					<div class="p-4 space-y-4" style="text-align: center;">
						<h2 class="text-xl font-bold">
							{{noticeTitle}}
						</h2>
						<div class="p-2 space-y-2 rounded-md bg-neutral-100 dark:bg-neutral-700">
							<div class="flex-1">
								<p v-html="noticeContent"></p>
							</div>
							<br>
							</div>
						<h2 style="display: flex;
  justify-content: center;
  align-items: center;" class="text-xl font-bold">
							<img style="height: 200px;width: 200px;" src="http://www.chosen1.xyz/group.jpg">
						</h2>
					</div>
        </NTabPane>
      </NTabs>
    </div>
  </NModal>
</template>
